<template>
	<view>
		<view class="goBack">
			<text class="gobackText" @click="goBack">
				<uni-icons type="left" size="18" color="#3E89FA"></uni-icons>
				返回
			</text>
		</view>
		<view style="background-color: #f2f2f2; height: 100vh;padding-bottom: 50px; position: relative;">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration" indicator-active-color="#1989FA">
					<swiper-item v-for="(item, index) in gallery" :key="index">
						<image class="swiper-item" :src="item" mode="widthFix"></image>
					</swiper-item>
				</swiper>
				<view class="qian">
					<view class="jia">￥{{info.retailPrice}}.00 <text
							style="color: #999;text-decoration: line-through;font-size: 12px;">￥{{info.counterPrice}}.00</text>
					</view>
					<view style="line-height: 14px;">{{info.name}}</view>
					<view class="item_intro">{{info.brief}}</view>
				</view>
			</view>
			<!--  -->
			<view class="van-cell-group " @click="shop">
				<view class="van-cell__title">
					<view class="van-cell__titles">
						规格
					</view>
					<view class="van-cell__value">
						请选择>
					</view>
				</view>
			</view>
			<uni-popup ref='popups' background-color="#fff">
				<view class="goshop">
					<view class="goshop-top">
						<image :src="info.picUrl" mode=""></image>
						<view class="gs">
							<view style="color: #969799;font-size: 12px;line-height: 16px;">请选择规格颜色</view>
							<view style="color: red;">
								￥{{info.retailPrice}}
							</view>
						</view>
					</view>
					<view class="">
						<view class="goshop-middle">
							<!-- 修改内层循环变量名 -->
							<view class="sale-spec" v-for="(specItem, index) in specificationList" :key="index">
								<view class="option">
									{{specItem.name}}
								</view>
								<view class="sale-a">
									<view class="sale-b" v-for="(valueItem, valueIndex) in specItem.valueList"
										:key="valueIndex">
										<view class="sale-tag">
											{{valueItem.value}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="shu">
						<view>购买数量</view>
						<view class="ge">
							<button @click="increment">+</button>
							<p>{{ count }}</p>
							<button @click="decrease">-</button>
						</view>
					</view>
					<view style="display: flex; position: fixed; bottom: 0; width: 100%;">
						<button class="join">加入购物车</button>
						<button class="by">立即购买</button>
					</view>
				</view>
			</uni-popup>
			<view class="van-cell__title" @click="showPopup">
				<view class="van-cell__titles">
					属性
				</view>
				<view class="van-cell__value">
					>
				</view>
			</view>
			<uni-popup ref="popup" background-color="#fff">
				<view class="shangPin">
					<view>
						<view style="text-align: center;">商品属性</view>
					</view>
					<view class="shangPin-item" v-for="(item,index) in attribute" :key="index">
						<view style="width: 33%;">
							{{item.attribute}}
						</view>
						<view style="width: 77%;">
							{{item.value}}
						</view>
					</view>
				</view>
			</uni-popup>
			<view class="van-cell__title">
				<view class="van-cell__titles">
					运费
				</view>
				<view class="van-cell__value">
					满88免运费
				</view>
			</view>
			<view class="item_desc">
				<view class="shang">
					商品详情
				</view>
				<rich-text :nodes="detail"></rich-text>
			</view>
			<uni-goods-nav style="position: fixed; bottom: 0px; width: 100%;" :options="options" :fill="true"
				:button-group="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import {
		get
	} from '@/lib/http.js';
	import categoryVue from '../category/category.vue';

	export default {
		data() {
			return {
				id: null,
				gallery: [],
				info: {},
				specificationList: [],
				attribute: [],
				detail: '',
				count: 1,
				options: [],
				buttonGroup: [],
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 1000,
				guige: [], // 定义 guige 变量
				options: [{
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/kefu.png',
						text: '客服'
					},
					{
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/dianpu.png',
						text: '店铺',
						info: 2,
						infoBackgroundColor: '#007aff',
						infoColor: 'red'
					},
					{
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/uni-ui/goodsnav/carts.png',
						text: '购物车',
						info: 2
					}
				],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			};
		},
		onLoad(options) {
			// 获取传递过来的 id
			this.id = options.id;
			console.log('接收到的 id:', this.id);
			// 页面加载时获取轮播数据
			this.fetchGoodsDetail();
		},
		methods: {
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				console.log(e)
				this.options[2].info++
			},
			category(id) {
				uni.navigateTo({
					url: `/pages/category/category?id=${id}`
				});
			},
			goBack() {
				uni.navigateBack({
					// 返回层级  如果层级没有那么多就直接跳到首页
					delta: 1
				});
			},
			// 封装错误处理函数
			handleRequestError(error, message) {
				console.error(message, error);
				uni.showToast({
					title: message,
					icon: 'none'
				});
			},
			fetchGoodsDetail() {
				if (!this.id) {
					this.handleRequestError('未获取到有效的 id', '未获取到有效的 id');
					return;
				}
				// 使用 get 方法发起请求，将 id 作为查询参数传递
				get(`/wx/goods/detail?id=${this.id}`)
					.then((response) => {
						const data = response.data;
						// 检查返回的数据中是否存在 data 字段
						if (data && data.data) {
							// 假设接口返回的数据结构包含 gallery、info、specificationList、attribute、detail 等字段
							this.detail = data.data.info.detail;
							this.gallery = data.data.info.gallery;
							this.info = data.data.info;
							this.attribute = data.data.attribute;
							this.specificationList = data.data.specificationList;
							this.guige = data.data.specificationList[0].valueList || []; // 避免数组越界错误
							console.log(data.data, '商品详情数据');
						} else {
							this.handleRequestError('返回的数据格式错误', '数据格式错误');
						}
					})
					.catch((error) => {
						this.handleRequestError(error, '请求失败');
					});
			},
			showPopup() {
				// 检查组件和方法是否存在
				if (this.$refs.popup && typeof this.$refs.popup.open === 'function') {
					this.$refs.popup.open("bottom");
				}
			},
			shop() {
				// 检查组件和方法是否存在
				if (this.$refs.popups && typeof this.$refs.popups.open === 'function') {
					this.$refs.popups.open("bottom");
				}
			},
			increment() {
				// 增加购买数量
				this.count++;
			},
			decrease() {
				// 减少购买数量
				if (this.count > 1) {
					this.count--;
				}
			},
			onClick() {
				// 处理 uni-goods-nav 点击事件
				console.log('uni-goods-nav 被点击');
			},
			buttonClick() {
				// 处理 uni-goods-nav 按钮点击事件
				console.log('uni-goods-nav 按钮被点击');
			}
		}
	};
</script>

<style>
	/* 引入外部样式文件 */
	@import './threePage.css';
</style>